<template>
  <div class="body">
    <div
      class="page-content"
      :class="isShowLuck ? 'filter' : ''"
      v-if="isShowLottery"
    >
      <img
        class="page-bg"
        src="https://h5-touch.oss-cn-shanghai.aliyuncs.com/project/intel/image/lottery-bg.jpg"
      />
      <div class="logo">
        <img src="../assets/image/logo.png" />
      </div>
      <div class="title">
        <img
          class="date"
          src="https://h5-touch.oss-cn-shanghai.aliyuncs.com/project/intel/image/date.png"
        />
        <img src="../assets/image/lottery-title.png" />
      </div>
      <div class="box">
        <div
          @click="getUserMessage"
          class="list"
          :class="drawIndex > 0 ? 'grey' : ''"
        ></div>

        <div
          v-for="item in prizeList"
          class="list"
          :class="drawIndex == item.index ? 'change_in' : ''"
          :key="item.id"
        >
          <div
            class="list_t"
            :class="[
              item.index === 3 || item.index === 6 || item.index === 8
                ? 'text'
                : '',
              item.index === 1 || item.index === 4 || item.index === 5
                ? 'big'
                : ''
            ]"
          >
            <img :src="item.imgsrc" />
          </div>
        </div>
      </div>
    </div>
    <!-- 奖品弹窗 -->
    <div class="luck-display" v-if="isShowLuck">
      <div class="tip-popup">
        <div class="tip-content" v-if="!isShowFrom">
          <div class="tip-message">
            <img
              class="no-prize"
              v-if="prizeResult === 3 || prizeResult === 6 || prizeResult === 8"
              src="../assets/image/popup/no-prize.png"
            />
            <img
              v-else
              class="submit-success"
              src="../assets/image/popup/submit.png"
            />
          </div>
          <a
            href="https://yunqi.aliyun.com/2021/agenda/session203?spm=5176.23948577a2c4e.J_6988780170.14.1406379830vEoR"
          >
            <img class="return-btn" src="../assets/image/popup/return.png"
          /></a>
          <img class="more-btn" src="../assets/image/popup/more-btn.png" />
        </div>
        <div class="form-content" v-if="isShowFrom">
          <img class="form-bg" src="../assets/image/popup/from-bg.png" alt="" />
          <div class="form-box">
            <div class="tip-box">
              <img
                class="congratulation"
                src="../assets/image/popup/congratulation.png"
              />
              <img class="tip" src="../assets/image/popup/tip-form.png" />
            </div>
            <div class="prize">
              <!-- <img
                :class="prizeName == '奖品2' ? 'small' : ''"
                :src="awardImage"
              /> -->
              <img
                class="prize1"
                src="../assets/image/popup/prize-1-1.png"
                v-if="prizeName === '奖品1'"
              />
              <img
                class="prize2"
                src="../assets/image/popup/prize-1-2.png"
                v-if="prizeName === '奖品2'"
              />
              <img
                src="../assets/image/popup/prize-1-3.png"
                v-if="prizeName === '奖品3'"
              />
            </div>
            <div class="message-box">
              <div class="section">
                <div class="section-title">收件人：</div>
                <div class="form-item-input">
                  <input type="text" v-model="form.name" />
                </div>
              </div>
              <div class="section">
                <div class="section-title">联系电话：</div>
                <div class="form-item-input">
                  <input type="text" v-model="form.phone" />
                </div>
              </div>
              <div class="section">
                <div class="section-title">收货地址：</div>
                <div class="form-item-input textarea">
                  <textarea
                    rows="3"
                    cols="20"
                    v-model="form.address"
                  ></textarea>
                </div>
              </div>
              <div class="bottom-box">
                <img class="bottom" src="../assets/image/popup/word.png" />
                <a
                  @click="linkClick('link1', 'link1')"
                  href="https://www.intel.cn/content/www/cn/zh/legal/terms-of-use.html"
                  ><img class="link1" src="../assets/image/popup/link1.png"
                /></a>
                <a
                  @click="linkClick('link2', 'link2')"
                  href="https://www.intel.cn/content/www/cn/zh/privacy/intel-privacy-notice.html"
                  ><img class="link2" src="../assets/image/popup/link2.png"
                /></a>
              </div>
              <!-- <div class="bottom">
                <img src="../assets/image/tip-ico.png" alt=""><span>英特尔隐私声明:</span>
                <span>通过提交此表格，您确认您是⼀名18周岁或以上的成⼈，并且您同意英特尔收集及使⽤您的上述个⼈信息用于礼品派送。英特尔的网站和通讯遵照我们的<a>隐私通知</a>和<a>使用条款</a></span>
              </div> -->
            </div>
            <div class="bottom-btn">
              <button @click="submit" class="submit"></button>
              <a
                href="https://yunqi.aliyun.com/2021/agenda/session203?spm=5176.23948577a2c4e.J_6988780170.14.1406379830vEoR"
              >
                <img
                  @click="giveUp"
                  class="waive"
                  src="../assets/image/popup/btn-1.png"
              /></a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="start-page" v-if="!isShowLottery">
      <div class="logo">
        <img src="../assets/image/logo.png" />
      </div>
      <div class="page-center">
        <img
          class="page-title"
          src="https://h5-touch.oss-cn-shanghai.aliyuncs.com/project/intel/image/index/index-title.png"
        />
        <img
          v-if="!isShowStart"
          class="start-time"
          src="https://h5-touch.oss-cn-shanghai.aliyuncs.com/project/intel/image/index/activity-time.png"
        />
        <img
          v-else
          class="start"
          src="https://h5-touch.oss-cn-shanghai.aliyuncs.com/project/intel/image/index/start.png"
        />
        <img
          class="page-address"
          src="https://h5-touch.oss-cn-shanghai.aliyuncs.com/project/intel/image/index/address.png"
        />
      </div>
      <img
        class="page-bg"
        src="https://h5-touch.oss-cn-shanghai.aliyuncs.com/project/intel/image/index/bg-1.png"
      />
      <img
        class="page-bottom"
        src="https://h5-touch.oss-cn-shanghai.aliyuncs.com/project/intel/image/index/bottom-img.png"
      />
    </div>
  </div>
</template>

<script>
import moment from 'moment'
let loopTimer
let timer
let onDrawing = false // 是否可进行抽奖标识，默认为false可进行抽奖
let drawIndex = 0 //抽奖过程KEY
import { draw, getUser } from '../api/index.js'
import { setCookie, getCookie } from '../assets/js/utils'
// import {useStore} from "vuex"
export default {
  name: 'index',
  // setup(props, ctx) {
  //   let store = useStore()
  //   // 因为store里state是浅灰色的，所以不能直接使用，若要使用store.state.dataList需要computed来调用
  //   let a =  store.state.isGiveUp
  //  return {
  //    store,
  //    a
  //  }
  // },
  data() {
    return {
      user_id: null,
      form: {
        name: '',
        phone: '',
        address: ''
      },
      drawIndex: null, //抽奖过程KEY
      prizeResult: null, //抽奖结果KEY
      prizeName: '奖品2', //抽奖结果KEY对应的奖品名称
      isShowLuck: false, // 是否显示奖品弹窗，默认false不显示
      showAgain: false, //是否抽奖后显示再抽一次按钮
      awardImage: '', // 弹窗展示的奖品照片
      awardName: '', // 弹窗展示的奖品名字
      time: null,
      isShowFrom: false, //控制显示的是提示框还是表单弹框
      isShowLottery: false, //是否显示抽奖页面活动在 10-19 16:30后显示抽奖的页面
      isShowStart: false, //在10-19 13：30-16：30之间显示即将开始的按钮
      prizeList: [
        {
          id: '001',
          index: 1,
          imgsrc:
            'https://h5-touch.oss-cn-shanghai.aliyuncs.com/project/intel/image/prizes1.png',
          prizeName: '奖品1'
        },
        {
          id: '002',
          index: 2,
          imgsrc: require('../assets/image/popup/prize2.png'),
          prizeName: '奖品2'
        },
        {
          id: '003',
          index: 3,
          imgsrc:
            'https://h5-touch.oss-cn-shanghai.aliyuncs.com/project/intel/image/no-prizes.png',
          prizeName: '谢谢参与'
        },
        {
          id: '004',
          index: 4,
          imgsrc:
            'https://h5-touch.oss-cn-shanghai.aliyuncs.com/project/intel/image/prizes3.png',
          prizeName: '奖品3'
        },
        {
          id: '005',
          index: 5,
          imgsrc:
            'https://h5-touch.oss-cn-shanghai.aliyuncs.com/project/intel/image/prizes1.png',
          prizeName: '奖品1'
        },
        {
          id: '006',
          index: 6,
          imgsrc:
            'https://h5-touch.oss-cn-shanghai.aliyuncs.com/project/intel/image/no-prizes.png',
          prizeName: '谢谢参与'
        },
        {
          id: '007',
          index: 7,
          imgsrc: require('../assets/image/popup/prize2.png'),
          prizeName: '奖品2'
        },
        {
          id: '008',
          index: 8,
          imgsrc:
            'https://h5-touch.oss-cn-shanghai.aliyuncs.com/project/intel/image/no-prizes.png',
          prizeName: '谢谢参与'
        }
      ]
    }
  },
  mounted() {
    const user_id = this.$route.query.token
    const test = this.$route.query.test
    if (test) {
      this.isShowStart = true
    }
    const link1 = getCookie('link1')
    const link2 = getCookie('link2')
    const giveUp = getCookie('giveUp')
    const submit = getCookie('submit')
    const prizeResult = getCookie('prizeResult')
    if (user_id) {
      //localStorage.setItem("user_id", user_id);
      setCookie('user_id', user_id, 1)
      this.user_id = user_id
      this.contrastDate()
      if (giveUp || submit) {
      } else {
        if (link2 || link1) {
          //this.getUserDraw()
          if (prizeResult !== -1) {
            if (prizeResult !== 2 && prizeResult !== 5 && prizeResult !== 7) {
              this.prizeResult = prizeResult
              this.prizeName = this.prizeList[this.prizeResult].prizeName
              this.awardImage = this.prizeList[this.prizeResult].imgsrc
              this.isShowLuck = true
              this.isShowFrom = true
            }
          }
        }
      }
      // if (giveUp) {
      // } else {
      //   this.getUserDraw()
      // }
    } else {
      console.log('用户id为空', user_id)
    }
  },
  methods: {
    getUserDraw() {
      getUser({
        user_id: this.user_id
      }).then((res) => {
        if (res.data.user.draw !== -1) {
          if (
            res.data.user.draw !== 2 &&
            res.data.user.draw !== 5 &&
            res.data.user.draw !== 7
          ) {
            if (res.data.user.phone !== null) {
            } else {
              this.prizeResult = res.data.user.draw
              this.prizeName = this.prizeList[this.prizeResult].prizeName
              this.awardImage = this.prizeList[this.prizeResult].imgsrc
              this.isShowLuck = true
              this.isShowFrom = true
            }
          }
        }
      })
    },
    linkClick(type, val) {
      //localStorage.setItem(type, val);
      setCookie(type, val, 1)
    },
    catchUserMessage() {
      getUser({
        user_id: this.user_id
      }).then((res) => {
        if (res.data.user.draw === -1) {
          onDrawing = false
          this.startDraw()
        } else {
          onDrawing = true
          this.$toast('您已经抽过奖了！')
        }
      })
    },
    getUserMessage() {
      if (this.user_id === null) {
        return
      }
      getUser({
        user_id: this.user_id
      }).then((res) => {
        if (res.data.user.draw === -1) {
          onDrawing = false
          this.startDraw()
        } else {
          onDrawing = true
          this.$toast('您已经抽过奖了！')
        }
      })
    },
    submit() {
      let tipMessage = ''
      if (this.form.name === '') {
        tipMessage = '请填写收件人'
      } else if (this.form.phone === '') {
        tipMessage = '请填写联系电话'
      } else if (this.form.address === '') {
        tipMessage = '请填写收货地址'
      }
      if (
        this.form.name !== '' &&
        this.form.phone !== '' &&
        this.form.address !== ''
      ) {
        draw({
          user_id: this.user_id,
          username: this.form.name,
          address: this.form.address,
          phone: this.form.phone
        }).then((res) => {
          if (res.data.code === 1) {
            this.isShowFrom = false
            //localStorage.setItem("submit", 1);
            setCookie('submit', 1, 1)
          }
        })
      } else {
        this.$toast(tipMessage)
      }
    },
    giveUp() {
      this.isShowLuck = false
      this.isShowFrom = false
      //localStorage.setItem("giveUp", 1);
      setCookie('giveUp', 1, 1)
    },
    contrastDate() {
      this.time = setInterval(() => {
        if (this.isShowLottery) {
          clearInterval(this.time)
        } else {
          console.log(moment().format('YYYY-MM-DD HH:mm:ss'))
          var startTime = '2021-10-19 13:30:00'
          var endTime = '2021-10-19 16:30:00'
          let isShowStart = moment(startTime).isBefore() //false
          let isShowLottery = moment(endTime).isBefore() //false
          if (isShowStart) {
            this.isShowStart = isShowStart
          }
          if (isShowLottery) {
            this.isShowLottery = isShowLottery
            clearInterval(this.time)
          }
        }
      }, 1000)
    },
    startDraw() {
      //this.againBtn();
      if (onDrawing) {
        return
      } else {
        onDrawing = true
      }

      clearInterval(loopTimer)
      clearTimeout(timer)
      loopTimer = setInterval(() => {
        this.changePrize()
      }, 100)

      // 随机将品池
      //let random = Math.floor(Math.random() * this.prizeList.length)

      draw({
        user_id: this.user_id
      }).then((result) => {
        let random = result.data.user.draw
        //localStorage.setItem("prizeResult", random);
        setCookie('prizeResult', random, 1)
        let res = {
          stutus: 1,
          prizeResult: this.prizeList[random].index,
          prizeName: this.prizeList[random].prizeName
        }
        if (res.stutus == 1) {
          timer = setTimeout(() => {
            clearInterval(loopTimer)
            loopTimer = setInterval(() => {
              this.changePrize()
            }, 100)

            timer = setTimeout(() => {
              clearInterval(loopTimer)
              loopTimer = setInterval(() => {
                this.changePrize()
              }, 150)

              timer = setTimeout(() => {
                clearInterval(loopTimer)
                loopTimer = setInterval(() => {
                  this.changePrize()
                }, 400)
                timer = setTimeout(() => {
                  this.prizeResult = res.prizeResult
                  this.prizeName = res.prizeName
                  // if (
                  //   this.prizeResult === 3 ||
                  //   this.prizeResult === 6 ||
                  //   this.prizeResult === 8
                  // ) {
                  //   this.isShowFrom = false;
                  // } else {
                  //   this.isShowFrom = true;
                  // }
                }, 1200)
              }, 1200)
            }, 1500)
          }, 1600)
        }
      })
    },
    //抽奖过程奖品切换
    changePrize() {
      drawIndex++
      drawIndex = drawIndex > 8 ? 1 : drawIndex
      console.log(drawIndex)
      this.drawIndex = drawIndex
      if (this.prizeResult == drawIndex) {
        clearInterval(loopTimer)
        clearTimeout(timer)
        let currentAward = this.prizeList[this.prizeResult - 1]
        this.showAgain = true
        this.awardImage = currentAward.imgsrc
        this.awardName = currentAward.prizeName
        setTimeout(() => {
          this.isShowLuck = true
          if (
            this.prizeResult === 3 ||
            this.prizeResult === 6 ||
            this.prizeResult === 8
          ) {
            this.isShowFrom = false
          } else {
            this.isShowFrom = true
          }
        }, 800)
      }
    },
    // 关闭奖品弹簧
    closePopup() {
      this.isShowLuck = false
    },
    //点击再抽一次按钮
    againBtn() {
      onDrawing = false
      drawIndex = 0 //抽奖过程KEY
      this.drawIndex = null
      this.prizeResult = null
      this.prizeName = null
      this.showAgain = false
      this.awardImage = ''
      this.awardName = ''
      this.isShowFrom = false
    }
  }
}
</script>

<style scoped>
.bottom-box {
  position: relative;
}
.link1 {
  width: 34px;
  height: 8px;
  position: absolute;
  bottom: -4px;
  left: 0;
}
.link2 {
  width: 42px;
  height: 8px;
  position: absolute;
  bottom: -4px;
  left: 36px;
}
/* 开始页面 */
.page-bottom {
  width: 100%;
  height: 357px;
  position: absolute;
  bottom: 0;
  left: 0;
}
.start-page .logo {
  top: 30px;
  right: 15px;
}
.page-center {
  position: absolute;
  top: 117px;
  left: 0;
  width: 100%;
  text-align: center;
  z-index: 99;
}
.page-title {
  width: 305px;
  height: 78px;
}
.start-time {
  width: 300px;
  height: 139px;
  margin: 15px 0;
}
.start {
  width: 330px;
  height: 78px;
  margin: 32px 0 56px 0;
}
.page-address {
  width: 167px;
  height: 53px;
}
/*获奖信息提交*/
.form-bg {
  position: absolute;
  top: 53px;
  width: 335px;
  height: 498px;
  right: 8px;
}
.form-box {
  position: absolute;
  top: 53px;
  width: 308px;
  height: 498px;
  left: 33px;
}
.congratulation {
  width: 160px;
  height: 44px;
}
.tip {
  width: 177px;
  height: 16px;
}
.tip-box {
  position: absolute;
  top: 25px;
  width: 100%;
  text-align: center;
  font-size: 0;
}
.prize {
  position: absolute;
  top: 90px;
  left: 78px;
  width: 148px;
  height: 112px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: url('https://h5-touch.oss-cn-shanghai.aliyuncs.com/project/intel/image/prize-bg.png')
    no-repeat;
  background-size: 100% 100%;
  object-fit: cover;
}
.prize img.prize2 {
  width: 85%;
  height: 90px;
}
.prize img {
  width: 65%;
  height: 85px;
}
.prize img.small {
  width: 30%;
  height: 85px;
}
.message-box {
  position: absolute;
  top: 195px;
  width: 100%;
  padding: 0 21px;
  box-sizing: border-box;
}
.section {
  margin-bottom: 7px;
}
.section-title {
  font-size: 15px;
  font-family: Intel Clear Hans;
  font-weight: 400;
  color: #ffffff;
  margin-bottom: 5px;
}
input {
  width: 80%;
  height: 30px;
  background: url('https://h5-touch.oss-cn-shanghai.aliyuncs.com/project/intel/image/input-bg.png')
    no-repeat;
  background-size: 100% 100%;
  outline: none;
  border: none;
  line-height: 30px;
  color: #ffffff;
  font-size: 16px;
  padding: 0 30px 0 15px;
}

textarea {
  width: 97%;
  height: 60px;
  padding: 10px 20px 10px 10px;
  box-sizing: border-box;
  outline: none;
  border: none;
  font-size: 16px;
  color: #ffffff;
  background: transparent;
}

.textarea {
  background: url('https://h5-touch.oss-cn-shanghai.aliyuncs.com/project/intel/image/textarea-bg.png')
    no-repeat;
  background-size: 100% 100%;
  width: 97%;
}

.bottom {
  width: 87%;
  margin-top: 3px;
  height: 35px;
  font-size: 12px;
  line-height: 1.2;
  color: #fff;
}
.bottom-btn {
  position: absolute;
  bottom: -40px;
  width: 100%;
}
.bottom-btn img {
  width: 122px;
  height: 35px;
  float: right;
}
.bottom-btn button {
  width: 122px !important;
  height: 35px;
  background: url('https://h5-touch.oss-cn-shanghai.aliyuncs.com/project/intel/image/btn-2.png')
    no-repeat;
  background-size: 100% 100%;
  margin: 0;
  float: left;
  outline: none;
  border: none;
}
.body {
  width: 100%;
  height: 100%;
}
.page-content {
  width: 100%;
  height: 100vh;
  position: relative;
  box-sizing: border-box;
  padding-top: 240px;
}
.page-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}
.logo,
.title {
  text-align: center;
  position: absolute;
}
.logo {
  top: 49px;
  right: 30px;
  z-index: 99;
}
.title {
  top: 160px;
  width: 100%;
}
.logo img {
  width: 49px;
  height: 19px;
}
.title img {
  width: 254px;
  height: 59px;
}
.title img.date {
  width: 81.5px;
  height: 9px;
  position: absolute;
  left: 47px;
  top: -20px;
}
.box {
  position: relative;
  width: 283.5px;
  height: 276px;
  margin: 0 auto 0;
  box-sizing: border-box;
  -webkit-box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.2);
  box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.2);
}
.list {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
  align-items: center;
  width: 95px;
  height: 95px;
  position: absolute;
  background: url('https://h5-touch.oss-cn-shanghai.aliyuncs.com/project/intel/image/item-bg.png')
    no-repeat;
  background-size: 100% 100%;
  border-radius: 5px;
}
/* 抽奖过程中选定样式 */

.list.change_in {
  background: url('https://h5-touch.oss-cn-shanghai.aliyuncs.com/project/intel/image/item-bg-active.png')
    no-repeat;
  background-size: 100% 100%;
}

.list_t {
  display: flex;
  align-content: center;
  justify-content: center;
}

.list_t img {
  height: 65px;
}
div.text img {
  height: 12px !important;
}
div.big img {
  width: 60%;
}

/* 根据TOP */

.list:nth-child(1) {
  left: 50%;
  top: 50%;
  color: #fff;
  background: url('https://h5-touch.oss-cn-shanghai.aliyuncs.com/project/intel/image/lottery-btn.png')
    no-repeat;
  background-size: 100% 100%;
  display: flex;
  justify-content: center;
  align-content: center;
  align-items: center;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 87px;
  height: 87px;
}

.list.grey:nth-child(1) {
  background-color: #9c9c9c;
}

.list:nth-child(2),
.list:nth-child(3),
.list:nth-child(4) {
  top: 0;
}

.list:nth-child(6),
.list:nth-child(7),
.list:nth-child(8) {
  bottom: 0;
}

.list:nth-child(5),
.list:nth-child(9) {
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

/* 根据LEFT */

.list:nth-child(2),
.list:nth-child(8),
.list:nth-child(9) {
  left: 0;
}

.list:nth-child(3),
.list:nth-child(7) {
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}

.list:nth-child(4),
.list:nth-child(5),
.list:nth-child(6) {
  right: 0;
}

/* 奖品弹窗 */
/*模糊效果(毛玻璃效果) */
.filter {
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);
}
.luck-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 98;
}
.tip-popup {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 98;
}
.tip-message {
  position: absolute;
  top: 183px;
  width: 100%;
  text-align: center;
}
.tip-message img {
  width: 252px;
  height: 174rpx;
  z-index: 99;
}
.return-btn {
  width: 150px;
  height: 36px;
  position: absolute;
  top: 388px;
  left: 50%;
  transform: translate(-50%, 0);
}
.more-btn {
  width: 179px;
  height: 56px;
  position: absolute;
  top: 473px;
  left: 50%;
  transform: translate(-50%, 0);
}
</style>
